<template>
  <page-layout>
    <template v-slot:header>
      <el-input
        v-model="shopName"
        placeholder="请输入商铺名字查询"
        size="small"
      ></el-input>
      <el-button type="primary" size="small" @click="searchEvt">查询</el-button>
      <el-button type="info" size="small" @click="addEvt">新增</el-button>
    </template>
    <template>
      <el-table :data="tableData" style="width: 100%" height="100%">
        <el-table-column fixed prop="shop_name" label="商铺名字" width="180" />
        <el-table-column prop="state" label="商铺状态" width="180">
          <template v-slot="{ row: { state } }">
            <div v-shopState="state"></div>
          </template>
        </el-table-column>
        <el-table-column prop="area" label="经营区域" width="180" />
        <el-table-column prop="manager" label="店长" width="180" />
        <el-table-column prop="remark" label="备注" width="320" />
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="detailEvt(row)"
              >详情</el-button
            >
            <el-button type="text" size="small" @click="editEvt(row)"
              >编辑</el-button
            >

            <el-button
              type="text"
              size="small"
              @click="openShop(row)"
              v-if="row.state === 'N'"
              >重新营业</el-button
            >

            <el-button
              type="text"
              size="small"
              @click="closeShop(row)"
              v-if="row.state === 'Y'"
              >暂停营业</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </page-layout>
</template>
<script>
import { shopListApi, shopStateApi } from "@/apis/shopApi";

export default {
  data() {
    return {
      tableData: [],
      shopName: "",
      query: {
        page: 1,
        size: 1000,
        shop_name: "",
      },
    };
  },
  // 自定义指令
  directives: {
    shopState(el, { value }) {
      let obj = {
        Y: { text: "正常营业", cls: "shop-state open" },
        N: { text: "暂停营业", cls: "shop-state close" },
      };
      el.setAttribute("class", obj[value].cls);
      el.innerHTML = obj[value].text;
    },
  },
  async mounted() {
    this.getList();
  },
  methods: {
    // 新增
    addEvt() {
      localStorage.removeItem("shop");
      this.$router.push("/shop/edit");
    },

    //获取商铺列表方法
    async getList() {
      let result = await shopListApi(this.query);
      // console.log("result", result);
      if (result.code === 200) {
        this.tableData = result.data.rows;
      }
    },
    // 查询
    searchEvt() {
      console.log(this.shopName);
      this.query.shop_name = this.shopName;
      console.log("this.query.shop_name", this.query.shop_name);
      this.getList();
    },
    // 详情页面
    detailEvt(data) {
      // console.log('data',data);
      data = JSON.stringify(data);
      localStorage.setItem("shop", data);
      this.$router.push("/shop/detail");
    },
    // 编辑页面
    editEvt(data) {
      data = JSON.stringify(data);
      localStorage.setItem("shop", data);
      this.$router.push("/shop/edit");
    },
    // 店铺状态切换
    openShop(row) {
      // debugger
      console.log("row", row);
      let info = {
        shop_id: row.shop_id,
        shop_name: row.shop_name,
        lng: row.lng,
        lat: row.lat,
        area: row.area,
        address: row.address,
        manager: row.manager,
        clark: row.clark,
        remark: row.remark,
        state: "Y",
      };

      console.log("info", info);
      this.$confirm("确定要重新开启这个门店?", "操作门店提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        // debugger
        let d = await shopStateApi(info);
        this.getList();
        console.log("状态", d);
        if (d.code === 200) {
          this.$message({
            type: "success",
            message: "开启门店成功!",
          });
        } else {
          this.$message({
            type: "info",
            message: "开启门店失败!",
          });
        }
      });
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消开启",
      //   });
      // });
    },
    closeShop(row) {
      let info2 = {
        shop_id: row.shop_id,
        shop_name: row.shop_name,
        lng: row.lng,
        lat: row.lat,
        area: row.area,
        address: row.address,
        manager: row.manager,
        clark: row.clark,
        remark: row.remark,
        state: "N",
      };
      this.$confirm("确定要关闭这个门店?", "操作门店提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let d = await shopStateApi(info2);
          console.log("d", d);
          if (d.code === 200) {
            this.$message({
              type: "success",
              message: "关闭门店成功!",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消关闭",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.shop-state {
  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #999;
    margin-right: 6px;
  }
  &.open {
    color: #409eff;
    &::before {
      background: #409eff;
    }
  }
  &.close {
    color: #999;
    &::before {
      background: #999;
    }
  }
}
</style>
